import Module from "@/views/dashboard/data/components/Module";
import icon from "./assets/51.svg";
import bg from "./assets/4311.webp";

export default defineComponent({
	name: "DeviceMonitor",
	setup() {
		return () => (
			<Module title={"设备质量监控"}>
				<div class={"w-full h-full px-10 box-border"}>
					<div class={"w-full h-full flex flex-col justify-end relative  box-border"}>
						<img class={"h-full"} src={icon} alt={""} />
						<Item title={"质量管理组织与政策"} class={"left-0 top-[-0.5rem]"}></Item>
						<Item title={"售后管理"} class={"left-1 top-0 bottom-0 m-auto"}></Item>
						<Item title={"售后支持服务"} class={"left-[-1rem]  bottom-4 "}></Item>
						<Item title={"专业建设"} class={"right-5  top-[-0.5rem]"}></Item>
						<Item title={"运维队伍"} class={"top-[40%]  right-[-0.5rem]"}></Item>
						<Item title={"服务评价"} class={"right-0  bottom-4"}></Item>
					</div>
				</div>
			</Module>
		);
	}
});

const Item = defineComponent({
	name: "Item",
	props: { title: String },
	setup(props) {
		return () => (
			<div
				class={"h-[30px] w-fit p-2 box-border px-3 absolute"}
				style={{ background: `url(${bg}) no-repeat`, "background-size": "100% 100%" }}
			>
				<div>{props.title}</div>
			</div>
		);
	}
});
